import React from 'react'
import Title from '../ReuseTitle'
import List from './ShoppingCartList'
import Bar from './ShoppingCartBar'
import { Icon } from  'react-weui'

import { browserHistory } from 'react-router'
import { connectShoppingCart } from '../../container/shoppingCart/connectShoppingCart'

const IconBox = (props) => (
    <div style={{ textAlign: 'center',marginTop: '120px'}}>
        <Icon size="large" value="warn" primary />
        <p style={{ lineHeight: '3.5em'}}>购物车空空如也</p>
    </div> 
    
)

class ShoppingCart extends React.Component {
	constructor(props) {
        super(props)
        this.state = {
            fetched:false,
            goodsData:[]
        }
    }
    componentWillMount() {
        const session = localStorage.getItem('session');
        const isAuth = localStorage.getItem('isAuthenticated');
        if(!session || !isAuth) {
            browserHistory.push(`/store/${this.props.params.storeId}/user/login`);
        }
    }
	componentDidMount(){
        this.props.shoppingCartActions.fetchCartGoods();
        this.setState({
        	fetched: true
        })
	}
	componentWillReceiveProps(nextProps) {
        if(nextProps.shoppingCart.isFetched == true && this.state.fetched == true) {
            this.setState({
                goodsData: nextProps.shoppingCart.goodsData,
                fetched: false
            })
        }
        if(nextProps.shoppingCart.isFetched == true && this.state.fetched == false) {
            this.props.shoppingCartActions.fetchCartGoods()
	        this.setState({
	        	fetched: true
	        })
        }
    }
	render() {
		const { goodsData } = this.props.shoppingCart;
        const { previewOrder } = this.props.orderActions
		return (
			<div>
                <Title title="购物车" name="cart" />
			    {goodsData.length>0?<List goodsData={goodsData} shoppingCart={this.props} />:<IconBox />}
			    <Bar goodsData={goodsData} shoppingCart={this.props} previewOrder={previewOrder} isCart={true} btn="立即支付" storeId={this.props.params.storeId} />
			</div>

		);
	}
}
export default connectShoppingCart(ShoppingCart)